/******************************************************************************************
 * Import
 ******************************************************************************************/
import _ from 'lodash';
import React, {Component} from 'react';
import { StyleSheet, Clipboard, TextInput } from 'react-native';
import Design from '../../../design';
import Config from '../../../config';
import ScreenBase from '../../../library/base/screen';
import { Icon, Tabs, Toast } from 'antd-mobile-rn';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';
import {
    HttpText, HttpHesq
} from '../../../library/func';

// svg
import Licon from '../../../library/comp/project/icon';


/******************************************************************************************
 * Screen
 ******************************************************************************************/
export default class List extends ScreenBase {
    constructor(props) {
        super(props);
        this.state = {
            // 使用佣金选项
			selector:['不使用佣金','使用佣金'],
			selectorChecked:'不使用佣金',
			// 支付按钮
			button:'去支付',
			// 地址id
			takeid: 0,
			// 用户地址
			address:{
                set_name:'XBACK',
                set_mobile:1513305503,
                set_address:'河北省保定市北市区瑞祥大街1001号和社区信息部',
            },
			// 用户佣金
			commission: 0,
			// 要购买的商品
			list:[
                {
                    set_name:'【人气水果】泰国香水椰青1个装(单果750-1000g)',
                    set_price:'49.9',
                    count:1,
                    product_object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    }
                }
            ],
			// 总共件数
			allCount: 1,
			// 商品总金额
			allAmount: 0,
			// 小计金额
			total_amout: 0,
			// 实付金额
			payment: 49.9,
			// 用户备注
			mark:'',
			// 是否使用佣金支付
			is_commission: 0,
			// 支付方式
			enum_paytype: '微信支付',
			// set_traffic_cost 配送费费
			set_traffic_cost: 0,
			// set_traffic_free 免配送费的订单金额
			set_traffic_free: 39,
			// set_traffic_limit 起送费（满**起送）
			set_traffic_limit: 10,
        }
    }
    /*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	//   用户留言
    onMark = (value)=> {
		// // console.log(e.detail.value)
		this.setState({
			mark: value,
		})
	}

    // 总render
	render() {
        return (
            <CPage>
				<CContent mb='120' mt='90'>

                    {/* 地址部分 */}
					<CRow bg='#fff' my='20' mx='30' ra='16' px='20' py='30'>
						<CItemY f='2' x='left'>
							<CBetween style={{width:'100%'}}>
								<CHand>
                                    <CIcon icon={ Licon["index-location"]} w='34' h='34' color='#6d6d6d'></CIcon>
                                    <CHand pl='16'><CText size='26'>收货人：{this.state.address.set_name}</CText></CHand>
								</CHand>
                                <CHand>
                                    <CHand><CText size='26'>{this.state.address.set_mobile}</CText></CHand>
                                </CHand>
							</CBetween>
							<CText size='22' mt='16' ml='50' lh='32' color='#7a7a7a'>收货地址：{this.state.address.set_address}</CText>
						</CItemY>
						<CIcon icon={ Licon["make-right"]} ml='15' w='28' h='28' color='#bfbfbf'></CIcon>
					</CRow>

                    {/* 微信支付 */}
					<CRow bg='#fff' my='5' mx='30' pa='20' ra='16'>
						<CBetween>
							<CLine>
                                <CIcon icon={ Licon["shop-wechat"]} w='40' h='40' color='#3da92f'></CIcon>
								<CText size='26' pl='10'>微信支付</CText>
							</CLine>
							<CLine x='right'>
                                <CIcon icon={ Licon["shop-duigou"]} w='34' h='34' color='#3da92f'></CIcon>
							</CLine>
						</CBetween>
					</CRow>

                    {/* 具体商品 */}
					<CRow bg='#fff' my='20' mx='30' ra='16'>
						<CColumn>
							<CLine bb='1 #f8f8f8' pa='20'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#6d6d6d' w='26' h='28'></CIcon>
								<CText size='24' pl='16'>每日一达</CText>
							</CLine>
							{this.state.list.map(item => {
								return (
									<CLine pa='16' y='center' bb='1 #f8f8f8' style={{width:'100%'}}>
										<CImage source={{uri:item.product_object.set_image_small}} w='130' h='130'/>
										<CColumn pl='20' style={{width:'100%'}}>
											<CLine style={{width:'100%'}}>
												<CText size='25' color='#252525' f='1'>{item.set_name}</CText>
											</CLine>
											<CBetween pt='20' style={{width:'100%'}}>
												<CText size='26' pr='20'  color='#d45f58'>￥{item.set_price}</CText>
												<CText size='24' color='#aaa'>x{item.count}</CText>
											</CBetween>
										</CColumn>
									</CLine>
								)
							})}
							<CLine bg='#f6f6f6' my='20' mx='20' py='4' px='15' df>
                                <CIcon icon={ Licon["shop-edit"] } color='#cbcbcb' w='20' h='20'></CIcon>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    placeholder='给卖家留言'
                                    value={this.state.mark}
                                    onChangeText={e=>this.onMark(e)}
                                    style={{flex:1,fontSize:12,paddingLeft:10,height:26,lineHeight:26,paddingTop:0,paddingBottom:0}}
                                />
							</CLine>
							<CRow mx='30'>
								<CColumn>
									<CAround mt='12'>
										<CLine x='left'>
                                            <CText size='23' color='#4c4c4c'>共{this.state.allCount}件商品</CText>
                                        </CLine>
										<CLine x='right'>
                                            <CText size='23' color='#4c4c4c'>商品金额：</CText>
                                        </CLine>
                                        <CLine x='right' color='#4c4c4c'>
                                            <CText size='23'>{this.state.allAmount}</CText>
                                        </CLine>
									</CAround>
									<CAround mt='12'>
										<CLine x='left'></CLine>
										<CLine x='right'>
                                            <CText size='23' color='#4c4c4c'>配送费：</CText>
                                        </CLine>
										<CLine x='right'>
                                            <CText size='23' color='#d76861'>+ {this.state.set_traffic_cost}</CText>
                                        </CLine>
									</CAround>
									<CAround mb='20' mt='12'>
										<CLine x='left'></CLine>
										<CLine x='right' color='#d76861'>
                                            <CText size='23' color='#d76861'>小计：</CText>
                                        </CLine>
                                        <CLine x='right'>
                                            <CText size='23' color='#d76861'>{this.state.total_amout}</CText>
                                        </CLine>
									</CAround>
								</CColumn>
							</CRow>
						</CColumn>
					</CRow>

                </CContent>

                 {/* 顶部 star */}
                 <CHeader h='90' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween h='90' px='10' bg='#fff' style={{width:'100%'}}>
                        <CHand>
                            <CIcon color="#434343" w='38' h='38' icon={ Licon.gobcak }></CIcon>
                        </CHand>
                        <CText size='30' color='#000'>确认订单</CText>
                        <CText></CText>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

                {/* 底部 */}
				<CFooter h='98' bg='#fff' y='center' bt='1 solid #e3e3e3'>
					<CBetween>
						<CLine pl='30'>
							<CText size='27'>实付款:</CText>
							<CText color='#c9322c' size='34'>￥{this.state.payment}</CText>
						</CLine>
						<CLine x='right'>
							<CText size='27' bg='#c9322c' color='#fff' h='100' lh='100' px='60'>{this.state.button}</CText>
						</CLine>
					</CBetween>
				</CFooter>
            </CPage>
        )
    }
}